<!DOCTYPE html>
<!-- 首页 -->
<html style="font-size: 36px;">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="../../public/css/common.css">
		<link rel="stylesheet" href="../../public/js/swiper/swiper-bundle.min.css">
		<link rel="stylesheet" href="../../public/css/home.css">
	</head>
	<body>
		<style type="text/css">

		</style>
		<div class="home-box">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../../public/images/home_banner.png" />
					</div>
					<div class="swiper-slide">
						<img src="../../public/images/home_banner.png" />
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>

			<div class="home-tabs flex">
				<a>
					<i class="home-tabs-h1"></i>
					<span>易兑</span>
				</a>
				<a href="redemption.html">
					<i class="home-tabs-h2"></i>
					<span>兑换</span>
				</a>
				<a>
					<i class="home-tabs-h3"></i>
					<span>承兑</span>
				</a>
				<a>
					<i class="home-tabs-h4"></i>
					<span>订单</span>
				</a>
			</div>
			<!-- 公告 -->
			<div class="home-tip">
				<span>
					<i class="icon-tip"></i>
				</span>
				<div class="scrollDiv" id="scrolBox">
					<ul>
						<li><a href="#">关于商城上新公告的公告内容内容内容内容内容1</a></li>
						<li><a href="#">关于商城上新公告的公告内容内容内容内容内容2</a></li>
						<li><a href="#">关于商城上新公告的公告内容内容内容内容内容3</a></li>
					</ul>
				</div>
			</div>
			<!-- 行情 -->
			<div class="home-ct">
				<img src="../../public/images/home_ct.png" />
			</div>
			<!-- 为你推荐 -->
			<h2>为你推荐</h2>
			<div class="home-recom flex">
				<a class="home-recom-hd" href="details.html ">
					<h2>热门限时抢 <em>hot</em></h2>
					<div class="se-count">
						<p class="se-hour"><span class="se-txt">00</span></p>
						<p class="se-min"><span class="se-txt">00</span></p>
						<p class="se-sec"><span class="se-txt">00</span></p>
					</div>
					<div class="hd-img">
						<img src="../../public/images/details_banner.jpg" />
					</div>
				</a>
				<div class="home-recom-cell">
					<div class="cell-go">
						<h2>优选福利购</h2>
						<span>积分赢好礼</span>
						<a><i></i></a>
					</div>
					<div class="cell-go act">
						<h2>邀请好友送福利</h2>
						<span>送更多福利</span>
						<a><i></i></a>
					</div>
				</div>
			</div>
			<!-- 承兑商入驻 -->
			<h2>承兑商入驻</h2>
			<div class="home-site">
				<img src="../../public/images/home_cbg.png" />
				<div class="home-site-cell flex">
					<section>
						<h1>承兑商入驻</h1>
						<p>承兑商入驻 &nbsp;&nbsp;&nbsp;福利享不停</p>
					</section>
					<img src="../../public/images/home_welfare.png" />
				</div>
			</div>
			<!-- 易兑产品 -->
			<h1 class="flex home-pt">
				<span>易兑产品</span>
				<a href="">更多产品</a>
			</h1>
			<ul class="home-list">
				<li>
					<a href="details.html">
						<img src="../../public/images/details_banner.jpg" />
						<h3>黄金项链天然话费积分加客服见附件纯24K</h3>
						<p>
							<b>DSXCY/YJF</b>
							<span>12.00</span>
							<i class="home-buy"></i>
						</p>
					</a>
				</li>
				<li>
					<a href="details.html">
						<img src="../../public/images/details_banner.jpg" />
						<h3>黄金项链天然纯24K</h3>
						<p>
							<b>DSXCY/YJF</b>
							<span>12.00</span>
							<i class="home-buy"></i>
						</p>
					</a>
				</li>
			</ul>
			<!-- 预上架产品 -->
			<h1 class="flex home-pt">
				<span>预上架产品</span>
				<a href="">更多产品</a>
			</h1>
			<ul class="home-list">
				<li>
					<a href="details.html">
						<img src="../../public/images/details_banner.jpg" />
						<h3>黄金项链天然话费积分加客服见附件纯24K</h3>
						<p>
							<b>DSXCY/YJF</b>
							<span>12.00</span>
							<i class="home-buy"></i>
						</p>
					</a>
				</li>
				<li>
					<a href="details.html">
						<img src="../../public/images/details_banner.jpg" />
						<h3>黄金项链天然纯24K</h3>
						<p>
							<b>DSXCY/YJF</b>
							<span>12.00</span>
							<i class="home-buy"></i>
						</p>
					</a>
				</li>
			</ul>
		</div>
		<div class="nav-item"></div>
		<div class="cen-nav">
			<ul>
				<li class="act">
					<a>
						<i class="icon-home"></i>
						<span>首页</span>
					</a>
				</li>
				<li>
					<a>
						<i class="icon-shop"></i>
						<span>易店</span>
					</a>
				</li>
				<li>
					<a href="../Exchange/exchange.html">
						<i class="icon-ex"></i>
						<span>易兑</span>
					</a>
				</li>
				<li>
					<a href="../MyCenter/mycenter.html">
						<i class="icon-user"></i>
						<span>个人</span>
					</a>
				</li>
			</ul>
		</div>

	</body>
</html>
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/rem.js"></script>
<script src="../../public/js/swiper/swiper-bundle.min.js"></script>
<script type="text/javascript">
	// banner轮动
	var swiper = new Swiper('.swiper-container', {
		speed: 500,
		loop: true,
		autoplay: {
			delay: 3000,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
		},
	});
	//公告轮动显示
	function AutoScroll(obj) {
		$(obj).find("ul:first").animate({
			marginTop: "-25px"
		}, 500, function() {
			$(this).css({
				marginTop: "0px"
			}).find("li:first").appendTo(this);
		});
	}
	$(document).ready(function() {
		setInterval('AutoScroll("#scrolBox")', 3000);
		var oDate = new Date();
		var nowTime = oDate.getTime(); //现在的毫秒数
		oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
		var targetDate = new Date(oDate.toLocaleDateString());
		run(targetDate);
	});

	function run(enddate) {
		getDate(enddate);
		setInterval("getDate('" + enddate + "')", 500);
	}

	function getDate(enddate) {
		var oDate = new Date(); //获取日期对象

		var nowTime = oDate.getTime(); //现在的毫秒数
		var enddate = new Date(enddate);
		var targetTime = enddate.getTime(); // 截止时间的毫秒数
		var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

		var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
		second = second % 86400; //余数代表剩下的秒数；
		var hour = Math.floor(second / 3600); //整数部分代表小时；
		second %= 3600; //余数代表 剩下的秒数；
		var minute = Math.floor(second / 60);
		second %= 60;
		var spanH = $('.se-txt')[0];
		var spanM = $('.se-txt')[1];
		var spanS = $('.se-txt')[2];

		spanH.innerHTML = tow(hour);
		spanM.innerHTML = tow(minute);
		spanS.innerHTML = tow(second);
	}

	function tow(n) {
		return n >= 0 && n < 10 ? '0' + n : '' + n;
	}
</script>
